﻿<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <link href="../themes/default/easyui.css" rel="stylesheet" />
    <link href="../themes/icon.css" rel="stylesheet" />
    <script src="../script/jquery.min.js"></script>
    <script src="../script/jquery.easyui.min.js"></script>
    <meta charset="utf-8" />
</head>
<body>
    <div id="tt" class="easyui-tabs" style="width:500px;height:250px;">
        <div title="Tab1" style="padding:20px;display:none;">
            tab1
        </div>
        <div title="Tab2" data-options="closable:true" style="overflow:auto;padding:20px;display:none;">
            tab2
        </div>
        <div title="Tab3" data-options="iconCls:'icon-reload',closable:true" style="padding:20px;display:none;">
            tab3
        </div>
    </div>
    <script type="text/javascript">

    //$("#tt").tabs({
    //    border: false,
    //    onSelect: function (title) {
    //        alert(title + ' is selected');
    //    }
    //});

    //$("#tt").tabs('add', {
    //    title: 'New Tab',
    //    content: 'Tab Body',
    //    closable: true,
    //    tools: [{
    //        iconCls: 'icon-mini-refresh',
    //        handler: function () {
    //            alert('refresh');
    //        }
    //    }]
    //});


        $('#tt').tabs({
            border: false,
            onSelect: function (title) {
                alert(title + ' is selected');
            }
        });
        // add a new tab panel
        $('#tt').tabs('add', {
            title: 'New Tab',
            content: 'Tab Body',
            closable: true,
            tools: [{
                iconCls: 'icon-mini-refresh',
                handler: function () {
                    alert('refresh');
                }
            }]
        });
        // get the selected tab panel and its tab object
        var pp = $('#tt').tabs('getSelected');
        var tab = pp.panel('options').tab;

    </script>



</body>
</html>
